<script setup lang='ts'>
// watch：侦听器，需要导入进行使用，注意组合式 API 中可以一次侦听多个数据
import { ref, watch } from "vue";
import type {Ref} from 'vue'

const count = ref(100)
const name = ref('张三')

// 侦听器，监听一个值的变化
// watch(count, (count, prevCount)=>{
//     console.log('被改变了',count, prevCount);
// })

// 侦听器最好是监听一个值，当然可以监听多个值，但是使用的时候这些值，只要有
// 一个发生变化，侦听器就会被重新执行
watch(
    [count, name]
    , 
    ([count, name], [prevCount, prevName])=>{
    console.log('被改变了',count, name, prevCount, prevName);
    },
    {
        immediate: true, // 配置非惰性
        deep: true, // 深度监听
        flush: 'post', // 设置刷新机制，等到 DOM 更新之后执行，sync更新之前，post更新之后
        onTrack(e) {
            // 可以获取到侦听器内容获取值的时候调用
            console.log(111111,e);
        },
        onTrigger(e) {
            // 在设置值的时候执行
            console.log(222222,e);
        }
    }
)


</script>
<template>
    <div>
       <button @click='count++'>修改 count</button>
       <button @click='name="高举"'>修改 name</button>
       <h1>count: {{ count }} -- {{ name }} </h1>
    </div>
</template>
<style>
    
</style>